<!--
 * @Date: 2023-09-20 16:22:54
 * @LastEditTime: 2023-10-09 17:40:33
 * 介绍:申请完成
-->
<script lang="ts" setup>
import { ApiTaskDetails } from "@@/api/wk/index";
import { uploadImages } from "@@/api/module/upload";
import { CinputImage } from "@@/components/common/CinputImages/index";
import { FormInstance } from "vant";
import { apiTaskApplyFinish, ApiTaskApplyFinish } from "@@/api/wk/index";
import { WkTaskStatus } from "@@/enum/globalEnum";
import { isNonNullStr } from "@@/utils/tools/is";
import applyArbitrate from "./applyArbitrate.vue";
import { useRactionSheetRef } from "@@/components/rework/RactionSheet/index";

const { t } = useI18n();
const props = defineProps<{
  details: ApiTaskDetails.Data;
  refresh: () => void;
}>();

const form = reactive<ApiTaskApplyFinish.Req>({
  title: "",
  images: "",
  task_id: props.details.id,
});

const btnLoading = reactive({
  submit: false,
});

let images: CinputImage[] = [];

async function submit() {
  btnLoading.submit = true;
  form.images = await uploadImages(images).catch(() => {
    btnLoading.submit = false;
    return Promise.reject();
  });
  const res = await apiTaskApplyFinish(form);
  btnLoading.submit = false;
  if (!res) return;
  props.details.status = WkTaskStatus.PENDING_AUDIT;
  RactionSheetRef.value?.close();
  props.refresh();
}

function open() {
  RactionSheetRef.value?.open({
    title: t("wan-cheng-ren-wu"),
  });
}

/**完成任务 */
const RactionSheetRef = useRactionSheetRef();
/**完成任务 */
const vanFormRef = ref<FormInstance>();
</script>
<template>
  <div class="MT-xl">
    <!-- 完成任务 -->
    <RactionSheet
      :close-on-click-overlay="!btnLoading.submit"
      ref="RactionSheetRef"
    >
      <VanDivider />
      <div class="PD-md">
        <van-form @submit="submit" ref="vanFormRef">
          <div class="auto-MT-md">
            <div class="C-T4">{{ $t("shuo-ming") }}</div>
            <Ccard class="MT-xs PD-sm">
              <Rinput
                v-model="form.title"
                required
                :placeholder="$t('qing-tian-xie-gai-zi-duan')"
                :type="'textarea'"
                :autosize="{ minHeight: 0, maxHeight: 200 }"
                maxlength="256"
                showWordLimit
                :rules="[
                  {
                    validator: isNonNullStr,
                    message: $t('qing-tian-xie-gai-zi-duan'),
                  },
                ]"
              />
            </Ccard>
            <div class="C-T4">{{ $t("tianJiaPingZheng") }}</div>
            <CinputImages
              class="MT-sm"
              @change="(e) => (images = e)"
              :maxLength="3"
            />
          </div>
        </van-form>

        <Rbutton
          class="MT-md"
          @click="vanFormRef?.submit()"
          :loading="btnLoading.submit"
          :size="'large'"
          bg="var(--C-LG1)" borderStyle="none"
        >
          {{ $t("shen-qing-wan-cheng") }}
        </Rbutton>
      </div>
    </RactionSheet>

    <div class="flex-J-SB" style="gap: var(--gap-md)">
      <applyArbitrate :="props" v-if="details.task_progress.length" />
      <Rbutton @click="open" :size="'large'" bg="var(--C-LG1)" borderStyle="none">
        {{ $t("wan-cheng-ren-wu") }}
      </Rbutton>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
